<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>专业公寓运营</title>
<link th:href="@{/css/frozen2.0.css}" rel="stylesheet" />
<link th:href="@{/css/apar.css}" rel="stylesheet" />
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/zepto.min.js}"></script>
<script th:src="@{/js/frozen.js}"></script>
</head>
<body ontouchstart="">
	<footer class="ui-footer ui-footer-btn" style="height:8%">
		<ul class="ui-tiled ui-border-t">
			<li data-href="/apartment/index" class="ui-border-r footer-unit-active"><div class="">首页</div></li>
			<li data-href="#" class="ui-border-r footer-unit"><div class="">订单</div></li>
			<li data-href="#" class="ui-border-r footer-unit"><div class="">个人</div></li>
		</ul>
	</footer>
	<section class="ui-container">
		<section id="slider">
			<div class="demo-item">
				<div class="demo-block">
					<div class="ui-slider">
						<ul class="ui-slider-content"
							style="height:100%; width: 100%; transition-property: transform; transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; transform: translate(-360px, 0px) translateZ(0px);">
							<li class=""><span style="background-image: url(http://ovhok8jas.bkt.clouddn.com/banner1.png)"></span></li>
							<li class="current"><span style="background-image: url(http://ovhok8jas.bkt.clouddn.com/banner2.png)"></span></li>
							<li class=""><span style="background-image: url(http://ovhok8jas.bkt.clouddn.com/banner3.png)"></span></li>
						</ul>
						<ul class="ui-slider-indicators">
							<li class="">1</li>
							<li class="current">2</li>
							<li class="">3</li>
						</ul>
					</div>
				</div>
			</div>
		</section>
		<!-- 第二段落 -->
		<section id="main-content" style="margin-top:15px; background-image: url(http://ovhok8jas.bkt.clouddn.com/main-content.png); border:1px solid #A8A8A8">
			<div class="ui-list-info" style="margin-left:7%; ">
	            <h1 class="ui-nowrap" style="font-size:200%;">成都华悦居</h1>
	            <p class="ui-nowrap" style="margin-top:2%; font-size:150%;color:#333333">为您提供高品质和舒适的居家体验</p>
	        </div>
		</section>
		<!-- 第三段落 -->
		<section id="main-content3" style="margin-top:15px; border:1px solid #A8A8A8">
			<ul class="ui-row" style="">
			    <li class="ui-col ui-col-100"><p style="font-size:240%; font-family: normal; font-weight:bold; margin-left:6%; color:#333333">跑腿代办</p></li>
			    <li class="ui-col ui-col-25"> 
			    	<div class="content-center" >
                		<img src="http://ovhok8jas.bkt.clouddn.com/%E9%80%82%E4%B8%AD.png" style="height:30%; width:50%" alt="">
		            	<p class="font-two-title">跑腿</p>
		            </div>
            	</li>
			    <li class="ui-col ui-col-25">
			    	<div class="content-center">
                		<img src="http://ovhok8jas.bkt.clouddn.com/204%E9%A6%96%E9%A1%B5.png" style="height:30%; width:50%" alt="">
		            	<p class="font-two-title">子女接送</p>
		            </div>
		        </li>
			    <li class="ui-col ui-col-25">
			    	<div class="content-center">
                		<img src="http://ovhok8jas.bkt.clouddn.com/204%E9%A6%96%E9%A1%B5.png" style="height:30%; width:50%" alt="">
		            	<p class="font-two-title">收发快递</p>
		            </div>
		        </li>
			    <li class="ui-col ui-col-25">
			    	<div class="content-center">
                		<img src="http://ovhok8jas.bkt.clouddn.com/204%E9%A6%96%E9%A1%B5.png" style="height:30%; width:50%" alt="">
		            	<p class="font-two-title">送水</p>
		            </div>
		        </li>
			</ul>
		</section>
		<!-- 第三段落 -->
		<section id="main-content3" style="margin-top:15px; border:1px solid #A8A8A8">
			<ul class="ui-row" style="">
			    <li class="ui-col ui-col-100"><p style="font-size:240%; font-family: normal; font-weight:bold; margin-left:6%; color:#333333">跑腿代办</p></li>
			    <li class="ui-col ui-col-25"> 
			    	<div class="content-center" >
                		<img src="http://ovhok8jas.bkt.clouddn.com/204%E9%A6%96%E9%A1%B5.png" style="height:30%; width:50%" alt="">
		            	<p class="font-two-title">跑腿</p>
		            </div>
            	</li>
			    <li class="ui-col ui-col-25">
			    	<div class="content-center">
                		<img src="http://ovhok8jas.bkt.clouddn.com/204%E9%A6%96%E9%A1%B5.png" style="height:30%; width:50%" alt="">
		            	<p class="font-two-title">子女接送</p>
		            </div>
		        </li>
			    <li class="ui-col ui-col-25">
			    	<div class="content-center">
                		<img src="http://ovhok8jas.bkt.clouddn.com/204%E9%A6%96%E9%A1%B5.png" style="height:30%; width:50%" alt="">
		            	<p class="font-two-title">收发快递</p>
		            </div>
		        </li>
			    <li class="ui-col ui-col-25">
			    	<div class="content-center">
                		<img src="http://ovhok8jas.bkt.clouddn.com/204%E9%A6%96%E9%A1%B5.png" style="height:30%; width:50%" alt="">
		            	<p class="font-two-title">送水</p>
		            </div>
		        </li>
			</ul>
		</section>
		<!-- 第三段落 -->
		<section id="main-content3" style="margin-top:15px; border:1px solid #A8A8A8">
			<ul class="ui-row" style="">
			    <li class="ui-col ui-col-100"><p style="font-size:240%; font-family: normal; font-weight:bold; margin-left:6%; color:#333333">跑腿代办</p></li>
			    <li class="ui-col ui-col-25"> 
			    	<div class="content-center" >
                		<img src="http://ovhok8jas.bkt.clouddn.com/204%E9%A6%96%E9%A1%B5.png" style="height:30%; width:50%" alt="">
		            	<p class="font-two-title">跑腿</p>
		            </div>
            	</li>
			    <li class="ui-col ui-col-25">
			    	<div class="content-center">
                		<img src="http://ovhok8jas.bkt.clouddn.com/204%E9%A6%96%E9%A1%B5.png" style="height:30%; width:50%" alt="">
		            	<p class="font-two-title">子女接送</p>
		            </div>
		        </li>
			    <li class="ui-col ui-col-25">
			    	<div class="content-center">
                		<img src="http://ovhok8jas.bkt.clouddn.com/204%E9%A6%96%E9%A1%B5.png" style="height:30%; width:50%" alt="">
		            	<p class="font-two-title">收发快递</p>
		            </div>
		        </li>
			    <li class="ui-col ui-col-25">
			    	<div class="content-center">
                		<img src="http://ovhok8jas.bkt.clouddn.com/204%E9%A6%96%E9%A1%B5.png" style="height:30%; width:50%" alt="">
		            	<p class="font-two-title">送水</p>
		            </div>
		        </li>
			</ul>
		</section>
		<!-- 第三段落 -->
		<section id="main-content3" style="margin-top:15px; border:1px solid #A8A8A8">
			<ul class="ui-row" style="">
			    <li class="ui-col ui-col-100"><p style="font-size:240%; font-family: normal; font-weight:bold; margin-left:6%; color:#333333">跑腿代办</p></li>
			    <li class="ui-col ui-col-25"> 
			    	<div class="content-center" >
                		<img src="http://ovhok8jas.bkt.clouddn.com/204%E9%A6%96%E9%A1%B5.png" style="height:30%; width:50%" alt="">
		            	<p class="font-two-title">跑腿</p>
		            </div>
            	</li>
			    <li class="ui-col ui-col-25">
			    	<div class="content-center">
                		<img src="http://ovhok8jas.bkt.clouddn.com/204%E9%A6%96%E9%A1%B5.png" style="height:30%; width:50%" alt="">
		            	<p class="font-two-title">子女接送</p>
		            </div>
		        </li>
			    <li class="ui-col ui-col-25">
			    	<div class="content-center">
                		<img src="http://ovhok8jas.bkt.clouddn.com/204%E9%A6%96%E9%A1%B5.png" style="height:30%; width:50%" alt="">
		            	<p class="font-two-title">收发快递</p>
		            </div>
		        </li>
			    <li class="ui-col ui-col-25">
			    	<div class="content-center">
                		<img src="http://ovhok8jas.bkt.clouddn.com/204%E9%A6%96%E9%A1%B5.png" style="height:30%; width:50%" alt="">
		            	<p class="font-two-title">送水</p>
		            </div>
		        </li>
			</ul>
		</section>
	</section>
	<script>
	(function() {
		var slider = new fz.Scroll('.ui-slider', {
			role : 'slider',
			indicator : true,
			autoplay : true,
			interval : 3000
		});

		slider.on('beforeScrollStart', function(fromIndex,
				toIndex) {
			// console.log(fromIndex, toIndex)
		});

		slider.on('scrollEnd', function(cruPage) {
			// console.log(cruPage)
		});
	})();
		$('.ui-list li,.ui-tiled li').click(function() {
			if ($(this).data('href')) {
				location.href = $(this).data('href');
			}
		});
		$('.ui-header .ui-btn').click(function() {
			location.href = 'index.html';
		});
	</script>

</body>
</html>